<template>
    <div class="main-body">
        <div class="a-main">
            <div class="a-main-title"></div>
            <div class="a-main-content">
                <a-row type='flex' justify="space-around">
                    <a href="javascript:;">
                        <img src="http://www.jiajiamall.com/res/1/img/mall/ad/1000x481/2019041617065546700.jpg" alt="">
                    </a>
                </a-row>
                <div style="margin-top:45px;">
                    <div  style="width:80%;margin:0 auto;text-align:center;">
                         <div class="server_title">
                             <span class="line"></span>
                             <span style="font-size:24px;padding:0 25px;color:green">绿色食品供应链服务</span>
                             <span class="line"></span>
                         </div>
                         <div style="color:grey;">Green food supply chain service</div>
                    </div>     
                    <a-tabs  @change="callback" style="width:100%;margin-top:25px;text-align:center;"  size='large'>
                        <a-tab-pane tab="产品提供者" key="1">
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                           </a-col>
                           <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                          <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                        </a-tab-pane>
                        <a-tab-pane tab="销售端销售平台" key="2">
                             <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                           </a-col>
                        </a-tab-pane>
                        <a-tab-pane tab="物流" key="3">
                             <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                           </a-col>
                        </a-tab-pane>
                        <a-tab-pane tab="消费终端" key="4">
                             <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/a0c8e880e4771db6d29acd2175fce7a2_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                            </a-col>
                            <a-col :span='4' style="padding-right:15px;margin-top:25px;">
                                <a href="javascript:;">
                                    <img src="http://jingjia.jm175.cn/upload/thumb/181203/c633dc9850de7a0690114d2389d527c9_400_200.jpg" alt="">
                                    <p style="background:#E3FBE3;padding:10px;">茶叶</p>
                                </a>
                           </a-col>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
    return {
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
  },
}
</script>
<style lang="scss" scoped>
span{
    display: inline-block;
}
.line{
    width:30%;
    border:solid green;
    vertical-align: middle;
}
// tabs表格
.ant-tabs-bar{
    border-bottom:none !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
    background: #ffffff;
    border:none;
}
img{
    width:100%;
}
</style>
